import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {NzListComponent, NzListItemComponent} from "ng-zorro-antd/list";
import {User} from "../../@core/data/user";
import {AsyncPipe, NgForOf} from "@angular/common";
import {CdkFixedSizeVirtualScroll, CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
import {Router, RouterLink} from "@angular/router";
import {NzInputDirective} from "ng-zorro-antd/input";
import {FormsModule} from "@angular/forms";
import {NzTypographyComponent} from "ng-zorro-antd/typography";
import {BehaviorSubject} from "rxjs";

@Component({
  selector: 'user-list',
  standalone: true,
  imports: [
    NzListComponent,
    NzListItemComponent,
    NgForOf,
    CdkVirtualScrollViewport,
    CdkFixedSizeVirtualScroll,
    RouterLink,
    NzInputDirective,
    FormsModule,
    NzTypographyComponent,
    AsyncPipe
  ],
  templateUrl: './user-list.component.html',
  styleUrl: './user-list.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserListComponent implements OnInit {

  @Input() users: User[] = []
  @Output() onPageNumberChange: EventEmitter<undefined> = new EventEmitter<undefined>();
  @Output() onRealNameChange: EventEmitter<string> = new EventEmitter<string>();
  realNameSource = new BehaviorSubject<string>('')

  constructor(private router: Router) {
  }

  ngOnInit(): void {
    this.realNameSource.asObservable()
      .subscribe((name) => {
        this.onRealNameChange.emit(name)
      })
  }

  /**
   * 搜索框输入姓名发生变化
   */
  realNameChange(name: string) {
    this.realNameSource.next(name)
  }

  /**
   * 滚动触发
   */
  onScrollend() {
    // 触发滚轮说明需要进行分页查询了
    this.onPageNumberChange.emit()
  }

  /**
   * 点击list-item查看用户详情
   * @param user
   */
  checkUserDetail(user: User) {
    this.router.navigate([`/userInfo/${String(user.id)}`])
  }

}
